<template>
  <div class="box">
  <router-view></router-view>

  <!-- 底部导航 -->
  <van-tabbar v-model="active" router replace v-show="$store.state.shownav">
    <van-tabbar-item   icon="home-o" to="/home" >首页</van-tabbar-item>
    <van-tabbar-item   icon="shopping-cart-o" to="/goods">购物车</van-tabbar-item>

    <!-- 条件渲染,更具登录状态改变显示标签 -->
    <van-tabbar-item   icon="user-o" to="/login" v-if="!token">登录</van-tabbar-item>
    <van-tabbar-item   icon="user-o" to="/mine" v-if="token">我的</van-tabbar-item>
  </van-tabbar>
</div>
</template>
<script>
export default {
  data() {
    return {
      // 条件渲染得变量
      token:null,
      //底部导航标签选中状态
      active: 0,
    };
  },
//侦听器解决导航标签样式与实际路由不匹配的问题
watch:{
  '$route.path'(topath,frompath){
    if(topath==="/login"){
      this.active=2
    }else if(topath==="/home"){
      this.active=0
    }else if(topath==="/goods"){
      this.active=1
    }
   
  },
},
//条件渲染的数据依据
  created() {
    this.token=localStorage.getItem("token")
  },
};
</script>
<style lang="scss" scoped>
.box{
  width: 100vw;
}

</style>
